<template>
  <div class="bucket-statistics">
    <div class="top-card">
      <div class="card-item">
        <div class="img-box">
          <img :src="barrelTotalCnt_sm" alt="" />
        </div>
        <div class="content-box">
          <span>当班合计产出桶数</span>
          <span>{{ barrelTotalCnt }} <em>桶</em></span>
        </div>
      </div>
      <div class="card-item">
        <div class="img-box">
          <img :src="barrelServiceabilityRate_sm" alt="" />
        </div>
        <div class="content-box">
          <span>条桶完好率</span>
          <span>{{ barrelServiceabilityRate }} <em>%</em></span>
        </div>
      </div>
      <div class="card-item">
        <div class="img-box">
          <img :src="breakTotalCnt_sm" alt="" />
        </div>
        <div class="content-box">
          <span>当班断条个数</span>
          <span>{{ breakTotalCnt }} <em>个</em></span>
        </div>
      </div>
      <div class="card-item">
        <div class="img-box">
          <img :src="breakTotalTimes_sm" alt="" />
        </div>
        <div class="content-box">
          <span>当班断条时长</span>
          <span>{{ breakTotalTimes }} <em>分钟</em></span>
        </div>
      </div>
    </div>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRef" v-bind="gridOption" v-on="gridEvents">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
    <BasicCard style="margin-top: 12px">
      <BasicVxeTable ref="gridRefDetail" v-bind="gridOptionDetail">
        <template #doffingLengthAvgSlot="{ row }"
          >{{
            row.doffingLengthAvg == null
              ? row.doffingLengthAvg
              : parseFloat(row.doffingLengthAvg).toFixed(2)
          }}
        </template>
      </BasicVxeTable>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import type { VxeGridListeners } from 'vxe-table'
  import barrelTotalCnt_sm from '@/assets/images/device-monitor/sm-barrelTotalCnt.png'
  import barrelServiceabilityRate_sm from '@/assets/images/device-monitor/sm-barrelServiceabilityRate.png'
  import breakTotalCnt_sm from '@/assets/images/device-monitor/sm-breakTotalCnt.png'
  import breakTotalTimes_sm from '@/assets/images/device-monitor/sm-breakTotalTimes.png'
  //   import { BucketReportRowVO, BucketDetailsReportRowVO } from '../types'
  import { BucketReportTableColumns, BucketDetailsReportTableColumns } from '../../data'

  import {
    getCanShuXiangQinList_shuMian,
    getJiTaiXiangQinList_shuMian,
    getPinZhongQiangQinList_shuMian,
    postTongJiList_shuMian,
    getjiTaiPingZhongChaXun
  } from '@/api/shengChanJianShi'

  const props = defineProps<{
    processName: string
    statusCode: string
  }>()
  const { t } = useI18n()
  const materialIds = ref([])
  const barrelTotalCnt = ref()
  const breakTotalCnt = ref()
  const breakTotalTimes = ref()
  const barrelServiceabilityRate = ref()
  const statisticsList = ref<any[]>([])
  //   const detailsList = ref<DetailsReportRowVO[]>([])

  const gridOption = reactive<BasicGridProps>({
    cellClassName({ column }) {
      if (['materialName', 'machineName'].includes(column.field)) {
        return 'col-color'
      }
      if (['breakCnt', 'barrelNo'].includes(column.field)) {
        return 'col-underline'
      }
      return null
    },
    extraConfig: {
      title: t('custom.统计报表'),
      isCustom: true,
      isExport: false,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `bucket-statistics-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    maxHeight: 500,
    columns: BucketReportTableColumns
  })

  const getStatisticsReportList = () => {
    return new Promise(() => {
      postTongJiList_shuMian({
        machineDocumentIds: [
          '33cfdaf9-9ef6-cd6f-bac0-3a07f8290b39',
          '315fff05-a7da-1ef0-1ebe-3a07f82fcfc4',
          'f3c912b2-3f6b-587a-4830-3a07f82fd07a',
          '59c20398-0563-8088-1349-3a07f82fd130',
          '89d263e9-8615-dfda-6b94-3a07f82fd1d1',
          'dcaf3ed2-a1fa-53f2-87e8-3a07f82fd2d2',
          'cb37c7eb-2f25-0a15-bc46-3a07f82fd37a',
          'fbd8ea27-5246-1b79-017a-3a07f82fd3f7',
          '9da829dc-cc4f-63f0-4420-3a07f82fd4c8',
          '2fa749b1-c81a-be44-6550-3a07f82fd51c',
          '7da1b87b-aec9-2e21-bcd5-3a07f82fd596',
          '17c1f4ee-82ff-d37b-ab7d-3a07f82fd5e3',
          'fac31b4e-d087-5d7b-eefe-3a07f82fd640',
          '793ea7c3-404b-7eb8-b549-3a07f82fd678',
          'c962eaaa-193b-bd39-9465-3a07f82fd6fd',
          '0a782ae2-7aef-05e1-3f4a-3a07f82fd757',
          'c6404e2a-32cd-c226-3b5e-3a07f82fd7d2',
          '0b834946-016b-f4ea-dff2-3a07f82fd831',
          'c4132892-830d-b5b6-7bec-3a07f82fd8af',
          'bea44f33-2f5b-0820-93e7-3a07f82fd92c',
          'e92369e4-8eb7-4b70-c7c4-3a07f82fd989',
          '68fba239-52a3-08d1-a41f-3a07f82fda05',
          '5797b782-5e72-3e08-6766-3a07f82fda9b',
          '8da693a5-18f4-8eab-c5d0-3a07f82fdadc',
          'd82f5874-1926-066d-7139-3a07f82fdb25',
          '336f2804-cfe3-bbe1-be16-3a07f82fdbb4',
          '6f52b29e-aafe-2adb-ddfd-3a07f82fdc02',
          'e4640057-86b4-87e8-755b-3a07f82fdc4e',
          '86d1b923-93c0-ce46-c7bd-3a07f82fdd52',
          '710b936b-4347-5e35-85ba-3a07f82fddfd',
          'b42e27bc-4766-9291-037a-3a07f82fdea6',
          '8eefc636-27ba-2ee4-9d1a-3a07f82fdf30',
          '909e1c46-3b4a-155f-f04f-3a07f82fdfdb',
          '6d4fb6d4-dd79-20be-ce78-3a07f82fe0a4',
          '52066ce0-d1c2-b308-b0c6-3a07f82fcf70',
          'b8b16599-ca0e-c418-68d1-3a07f82fd014',
          'f9fdd293-c92a-8f85-6f14-3a07f82fd0fc',
          '46942a5d-da28-a749-0078-3a07f82fd179',
          '596ba037-26ae-3b63-bd20-3a07f82fd233',
          '4f331c1f-7eb7-4e64-17e5-3a07f82fd327',
          '50ef6e20-e28b-26ff-ea4c-3a07f82fddad',
          '3796db3d-e0c1-92ec-78ff-3a07f82fde46',
          '6b697f99-7fef-92b9-7160-3a07f82fdef3',
          '01b821f8-fea1-08c9-a801-3a07f82fdfa5',
          '34e4f7b2-663f-92e7-5de4-3a07f82fe024',
          '28a28a05-ea40-80e3-38c8-3a07f82fe0fb'
        ],
        tsIdStart: '25071201',
        tsIdEnd: '25071201'
      }).then((res: any) => {
        // this.columns2[this.columns2.length - 1].title =
        //   '定量(' +
        //   this.$danWeiZhuanHuan[res.copReportStatistics[0].details[0].weightPerLengthUnit] +
        //   ')'
        // this.columns[this.columns.length - 1].title =
        //   '定量(' +
        //   this.$danWeiZhuanHuan[res.copReportStatistics[0].details[0].weightPerLengthUnit] +
        //   ')'
        statisticsList.value = res.barrelReportDetail.map((value) => {
          return {
            ...value,
            breakTimes: (value.breakTimes / 60).toFixed(2),
            spinningStart: dayjs(value.spinningStart).format('YYYY-MM-DD HH:mm'),
            spinningEnd: dayjs(value.spinningEnd).format('YYYY-MM-DD HH:mm'),
            spinngDuration: (value.spinngDuration / 60).toFixed(2)
          }
        })

        gridOption.data = statisticsList.value
        selectedRow.value = statisticsList.value[0]
        getDetailListBymaterialName()

        barrelTotalCnt.value = res.barrelTotalCnt
        breakTotalCnt.value = res.breakTotalCnt
        barrelServiceabilityRate.value = res.barrelServiceabilityRate
        breakTotalTimes.value = (res.breakTotalTimes / 60).toFixed(2)
      })
    })
  }

  const selectedRow = ref()
  const gridEvents: VxeGridListeners = {
    cellClick({ row, column }) {
      selectedRow.value = row
      switch (column.field) {
        case 'materialName':
          getDetailListBymaterialName()
          break
        case 'machineName':
          getDetailListByMachineName()
          break
        case 'barrelNo':
          getDetailListByOther(0)
          break
        case 'breakCnt':
          getDetailListByOther(1)
          break
      }
    }
  }

  // 点击品种获取参数详情数据
  const getDetailListBymaterialName = () => {
    getPinZhongQiangQinList_shuMian({
      materialId: selectedRow.value.materialId,
      tsidStart: '25071201',
      tsidEnd: '25071201'
    }).then((res: any) => {
      handleDetailData(res)
    })
  }

  // 点击机台获取详情数据
  const getDetailListByMachineName = () => {
    getJiTaiXiangQinList_shuMian({
      machineDocumentId: selectedRow.value.machineDocumentId,
      tsidStart: '25071201',
      tsidEnd: '25071201'
    }).then((res) => {
      handleDetailData(res)
    })
  }

  // 点击其他参数获取详情数据 0桶序号 1断条个数
  const getDetailListByOther = (index) => {
    getCanShuXiangQinList_shuMian({
      machineDocumentId: selectedRow.value.machineDocumentId,
      start: selectedRow.value.spinningStart,
      end: selectedRow.value.spinningEnd,
      description: index
    }).then((res) => {
      handleDetailData(res)
    })
  }

  // 详情表格数据处理并赋值
  const handleDetailData = (res) => {
    gridOptionDetail.data = res.map((val) => {
      return {
        ...val,
        machineName: selectedRow.value.machineName,
        startTime: dayjs(val.startTime).format('YYYY-MM-DD HH:mm'),
        endTime: dayjs(val.endTime).format('YYYY-MM-DD HH:mm'),
        duration: Math.floor(val.duration / 60)
      }
    })
  }

  const gridOptionDetail = reactive<BasicGridProps>({
    extraConfig: {
      title: t('custom.详细报表'),
      isCustom: true,
      isExport: true,
      isFilterAndSort: true
    }, // 拓展的配置
    id: `bucket-detail-statistics-${props.statusCode}`, // id用于缓存,务必配置
    toolbarConfig: {}, // 工具栏
    exportConfig: {
      filename: '滤尘机台报表'
    },
    maxHeight: 500,
    columns: BucketDetailsReportTableColumns
  })

  onMounted(() => {
    getStatisticsReportList()
  })
</script>
<style scoped lang="scss">
  .top-card {
    display: flex;
    margin-bottom: 20px;

    .card-item {
      box-sizing: border-box;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 120px;
      padding: 20px;
      margin-right: 24px;
      line-height: 120px;
      text-align: center;
      background-color: #fff;

      .img-box {
        width: 80px;
        height: 80px;
        margin-right: 12.5%;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .content-box {
        display: flex;
        flex-direction: column;
        text-align: left;

        span {
          height: 30px;
          font-size: 14px;
          line-height: 30px;
          color: #4f5759;

          em {
            font-size: 12px;
          }
        }

        span:last-child {
          font-size: 20px;
          color: rgba($color: #000, $alpha: 90%);
        }
      }
    }

    .card-item:last-child {
      margin-right: 0;
    }
  }

  :deep(.col-color) {
    color: #74c239;
    cursor: pointer;
  }

  :deep(.col-underline) {
    color: #74c239;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
